<script setup lang="tsx">
import { ref, unref, reactive } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { useSearch } from '@/hooks/web/useSearch'
import { adminBusinessMemberCardBillApi } from '@/api/MerchantAccount'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await adminBusinessMemberCardBillApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods

const { searchRegister } = useSearch()

const crudSchemas = reactive<CrudSchema[]>([
  {
    label: '购买编号',
    field: 'orderNo',
    search: {
      hidden: true
    }
  },
  {
    label: '金额',
    field: 'cardCost',
    search: {
      hidden: true
    }
  },
  {
    label: '次卡类型',
    field: 'cardName',
    search: {
      hidden: true
    }
  },
  {
    label: '第三方支付流水号',
    field: 'returnNo',
    search: {
      hidden: true
    }
  },
  {
    label: '状态',
    field: 'payState',
    search: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div>
                {row.payState === 1
                  ? '待支付'
                  : row.payState === 2
                    ? '支付成功'
                    : row.payState === 3
                      ? '支付失败'
                      : '支付中'}
              </div>
              {row.payState === 2 ? <div>{`原因：${row.payFailReason}`}</div> : ''}
            </>
          )
        }
      }
    }
  },
  {
    label: '支付时间',
    field: 'payTime',
    search: {
      label: '购买时间',
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  const { payTime, ...rest } = params
  let payTimeStart, payTimeEnd
  if (payTime && payTime.length > 0) {
    payTimeStart = payTime[0]
    payTimeEnd = payTime[1]
  }
  currentPage.value = 1
  searchParams.value = {
    payTimeStart,
    payTimeEnd,
    ...rest
  }
  getList()
}

const refresh = () => {
  setSearchParams(searchParams.value)
}

defineExpose({
  refresh
})
</script>

<template>
  <div>
    <Search
      :schema="allSchemas.searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
      @register="searchRegister"
    />
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </div>
</template>
